import React from 'react'
import ReactDOM from 'react-dom'
import App from '@/App'
import store from '@/store'
import { Provider } from 'react-redux'

import './style/global.less' // 引入全局 less

// appLoading ↓
import lottie, { AnimationItem } from 'lottie-web'
let lottieObj: AnimationItem
initAppLoading() // 执行【初始化】
// 添加 appLoading
export function addAppLoading() {
  const appLoading = document.createElement('div')
  appLoading.id = 'appLoading'
  const appLoadingDiv = document.createElement('div')
  appLoadingDiv.id = 'appLoadingDiv'
  appLoading.appendChild(appLoadingDiv)
  document.body.appendChild(appLoading) // 添加到 body里面
  initAppLoading()
}
// 初始化 appLoading
function initAppLoading() {
  lottieObj = lottie.loadAnimation({
    container: document.getElementById('appLoadingDiv')!, // 容器
    renderer: 'svg', // 'svg' / 'canvas' / 'html'
    loop: true, // 动画是否循环
    autoplay: true, //是否自动播放
    path: '/appLoading.json', // 动画文件路径
  })
}
// 销毁 appLoading
export function destroyAppLoading() {
  if (lottieObj) {
    lottieObj.destroy()
  }
}
// appLoading ↑

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)
